<template>
  <div class="wrapper">
    <el-watermark class="watermark" :content="config.content" :font="config.font" :z-index="config.zIndex"
      :rotate="config.rotate" :gap="config.gap" :offset="config.offset">
      <div class="demo">
        <h1 style="text-align: center;">请在右侧面板设置水印参数调整显示效果</h1>
        <!-- 添加PDF加载部分 -->
        <div class="pdf-container">
          <iframe :src="pdfUrl" width="100%" height="700px" frameborder="0"></iframe>
        </div>
      </div>
    </el-watermark>
    <el-form class="form" :model="config" label-position="top" label-width="50px">
      <el-form-item label="水印内容">
        <el-input v-model="config.content" />
      </el-form-item>
      <el-form-item label="水印颜色">
        <el-color-picker v-model="config.font.color" show-alpha />
      </el-form-item>
      <el-form-item label="字体大小">
        <el-slider v-model="config.font.fontSize" />
      </el-form-item>
      <el-form-item label="zIndex">
        <el-slider v-model="config.zIndex" />
      </el-form-item>
      <el-form-item label="旋转角度">
        <el-slider v-model="config.rotate" :min="-180" :max="180" />
      </el-form-item>
      <el-form-item label="水印间距">
        <el-space>
          <el-input-number v-model="config.gap[0]" controls-position="right" />
          <el-input-number v-model="config.gap[1]" controls-position="right" />
        </el-space>
      </el-form-item>
      <el-form-item label="左上角偏移量">
        <el-space>
          <el-input-number v-model="config.offset[0]" placeholder="offsetLeft" controls-position="right" />
          <el-input-number v-model="config.offset[1]" placeholder="offsetTop" controls-position="right" />
        </el-space>
      </el-form-item>
      <!-- 添加一个保存按钮 -->
       <el-button type="primary">保存</el-button>
    </el-form>
  </div>
</template>

<script setup lang="js">
import { reactive } from 'vue'

const config = reactive({
  content: '智慧档案管理系统',
  font: {
    fontSize: 16,
    color: 'rgba(0, 0, 0, 0.15)',
  },
  zIndex: -1,
  rotate: -22,
  gap: [100, 100],
  offset: [],
})

// 定义PDF文件的URL
const pdfUrl = 'https://aclanthology.org/2024.acl-short.1.pdf'
</script>

<style scoped>
.wrapper {
  display: flex;
}
.watermark {
  display: flex;
  flex: auto;
}
.demo {
  flex: auto;
}
.form {
  width: 330px;
  margin-left: 20px;
  border-left: 1px solid #eee;
  padding-left: 20px;
}

img {
  z-index: 10;
  width: 100%;
  max-width: 300px;
  position: relative;
}
.pdf-container {
  margin-top: 20px;
  width: 100%;
}
</style>
